<template>
    <popup ref="popupRef" :title="popupTitle" width="500px" @confirm="handleConfirm" :async="true" @close="popupClose">
        <div class="pr-8">
            <el-form ref="formRef" :model="formData" label-width="180px" :rules="formRules">
                <el-form-item label="填写退款原因后确认" prop="back_notice">
                    <el-input v-model="formData.back_notice" type="textarea" placeholder="请填写退款原因" :rows="4" />
                </el-form-item>
            </el-form>
        </div>
    </popup>
</template>
<script lang="ts" setup>
	import Popup from '@/components/popup/index.vue'
	import type { FormInstance, FormRules } from 'element-plus'
	import feedback from '@/utils/feedback'
	const formRef = shallowRef<FormInstance>()
	const props = defineProps({
		show: {
			type: Boolean,
			required: true
		},
		value: {
			type: [Number, String],
			required: true
		}
	})

	const emit = defineEmits<{
		(event: 'update:show', value: boolean): void
		(event: 'confirm', value: any): void
	}>()

	const popupTitle = computed(() => {
		return `退款`
	})

	const formData = reactive({
		id: 0,
		back_notice: ''
	})
	
	const popupRef = shallowRef<InstanceType<typeof Popup>>()

	const formRules: FormRules = {
		back_notice: [
			{
				required: true,
				message: '请填写退款原因'
			}
		]
	}

	const handleConfirm = async () => {
		await formRef.value?.validate()
		emit('confirm', {id:props.value,back_notice:formData.back_notice})
	}

	const popupClose = () => {
		emit('update:show', false)
		formRef.value?.resetFields()
	}

	watch(
		() => props.show,
		(val) => {
			if (val) {
				popupRef.value?.open()
			} else {
				popupRef.value?.close()
			}
		}
	)
</script>
